<template>
    <div class="question-box">
        <!-- 上栏 -->
        <el-form class="question-head">
            <div class="head-title">题目列表</div>
            <div class="head-content">
                <div class="head-content-left">
                    <el-form-item>
                        <!-- <div class="word">课程</div> -->
                        <el-select v-model="quesHeadData.belongCourseId" class="select" placeholder="请选择课程">
                            <el-option v-for="course in quesHeadData.courses" :label="course.label"
                                :value="course.value" @click="getQueryBankListCourse(course.value)" />
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <!-- <div class="word">题型</div> -->
                        <el-select v-model="quesHeadData.quesType" class="select" placeholder="请选择题型">
                            <el-option v-for="item in categories" :label="item.label" :value="item.value"
                                @click="getQueryType(item.value)" />
                        </el-select>
                    </el-form-item>
                    <el-button type="primary" plain @click="addQUestion"><i class="iconfont icon-tianjia"></i>
                        新增题目</el-button>
                    <el-button v-if="questionId.length > 0" type="danger" plain
                        @click="deleteQuestions(questionId)">批量删除</el-button>
                </div>
                <div class="head-content-right">
                    <el-input v-model="search" placeholder="请输入题目" class="input" @keyup.enter.native="searchByTitel">
                        <template #append>
                            <el-button class="iconfont icon-sousuo3" @click="searchByTitel"></el-button>
                        </template>
                    </el-input>
                </div>
            </div>
        </el-form>
        <!-- 表格 -->
        <div class="table">
            <el-table :data="tableData" style="width: 100wh" @selection-change="selectId"
                :header-cell-style="{ 'text-align': 'center', background: '#f0f4f7', color: '#606266' }"
                max-height="430" :row-style="{ height: '5vh' }">
                <el-table-column type="selection" width="35" align="center" />
                <el-table-column label="序号" type="index" width="80" align="center" />
                <el-table-column prop="questionTitle" label="题目内容" max-width="230" min-width="140px" align="center"
                    :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="questionType" label="题型" max-width="100" align="center" />
                <el-table-column prop="difficultLevel" label="难度" max-width="100" align="center" />
                <el-table-column prop="createTime" label="创建时间" max-width="180" min-width="100px" align="center" />
                <el-table-column label="操作" align="center" min-width="90px">
                    <template #default="scope">
                        <el-button type="success" circle class="iconfont icon-sousuo1"
                            @click="checkQuestion(scope.row)" />
                        <el-button type="primary" circle class="iconfont icon-bianji"
                            @click="updateQuestion(scope.row)" />
                        <el-popconfirm width="120" confirm-button-text="确认" cancel-button-text="取消"
                            @confirm="deleteQuestion(scope.row)" title="确认删除?">
                            <template #reference>
                                <el-button type="danger" circle class="iconfont icon-shanchu" />
                            </template>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 分页 -->
        <div class="foot">
            <div class="question-foot">
                <el-pagination v-model:current-page="paginationData.pageNum" v-model:page-size="paginationData.pageSize"
                    :page-sizes="[20, 50, 100]" :small="paginationData.small" layout="sizes, prev, pager, next"
                    :total="Number(paginationData.total)" @size-change="handleSizeChange"
                    @current-change="handleCurrentChange" class="pagination" />
            </div>
        </div>

    </div>
</template>

<script setup>
import { ref, reactive, onMounted, } from 'vue';
import { useRouter, useRoute } from 'vue-router'
import { getQueryBankListAPI, getCourseListAPI, deleteBatchBankAPI, getCourseByIdAPI } from '@/api/api'
import { ElMessage } from 'element-plus';
// import editor from '@/components/editor.vue'

const router = useRouter()
const route = useRoute()

const quesHeadData = ref({
    //题目类型
    quesType: '',
    //所属课程
    belongCourseId: '',
    //获取到的所有课程
    courses: [],
    //课程列表
    courseList: [],
})

//搜索框
const search = ref("")

//题型
const categories = reactive([
    {
        value: 0,
        label: "选择题"
    },
    {
        value: 1,
        label: "填空题"
    },
    {
        value: 2,
        label: "判断题"
    },

    {
        value: 3,
        label: "简答题"
    },
    {
        value: 4,
        label: "材料题"
    },
])
//题目展示内容
const tableData = ref([])
//题目分页
const paginationData = reactive({
    pageSize: 20,
    total: 0,
    pageNum: 1,
    background: false,
    disabled: false,
    small: '',
})

onMounted(() => {
    //获取课程信息
    getCourseList()
})

//分页查询课程
const getCourseList = async () => {
    await getCourseListAPI().then(res => {
        if (res.data.code == 200) {
            quesHeadData.value.courseList = res.data.data.list
            getCourseName(quesHeadData.value.courseList)
            if (sessionStorage.getItem('courseId')) {
                getCourseById(sessionStorage.getItem('courseId'))
                getQueryBankListCourse(sessionStorage.getItem('courseId'))
            }
        }
    })
}
//获取课程名
const getCourseName = (courseList) => {
    for (let item of courseList) {
        quesHeadData.value.courses.push({
            label: item.courseName,
            value: item.id
        })
    }
}
//根据课程id查询课程名（单查）
const getCourseById = async (id) => {
    await getCourseByIdAPI(id).then(res => {
        quesHeadData.value.belongCourseId = res.data.data.courseName
    })
}


//当一页的数量改变
const handleSizeChange = (newPageSize) => {
    paginationData.pageSize = newPageSize
    getQueryBankListCourse(sessionStorage.getItem('courseId'))
}
//第几页
const handleCurrentChange = (newCurrentPage) => {
    paginationData.pageNum = newCurrentPage
    getQueryBankListCourse(sessionStorage.getItem('courseId'))
}
//题目类型的值
const questionType = ref('')
//获得题目类型
const getQueryType = (value) => {
    questionType.value = value
    getQueryBankListCourse(sessionStorage.getItem('courseId'))
}
//根据课程多查题目
const getQueryBankListCourse = async (id) => {
    sessionStorage.setItem('courseId', id)
    await getQueryBankListAPI(id, questionType.value, paginationData.pageNum, paginationData.pageSize, search.value).then(res => {
        if (res.status == 200) {
            console.log(res.data.data);
            paginationData.total = res.data.data.total
            wrapDifficultLevel(res.data.data.list)
            wrapQuestionType(res.data.data.list)
            tableData.value = res.data.data.list
        }
    })
}

//根据title查询题目列表
const searchByTitel = async () => {
    getQueryBankListCourse(sessionStorage.getItem('courseId'))
}
//封装难度的值
const wrapDifficultLevel = (data) => {
    for (let item of data) {
        if (item.difficultLevel == 0) {
            item.difficultLevel = '简单'
        }
        if (item.difficultLevel == 1) {
            item.difficultLevel = '中等'
        }
        if (item.difficultLevel == 2) {
            item.difficultLevel = '困难'
        }
    }
}
//封装题型的值
const wrapQuestionType = (data) => {
    for (let item of data) {
        if (item.questionType == 0) {
            if (item.isSingleSelect == 0) {
                item.questionType = '单选题'
            } else {
                item.questionType = '多选题'
            }
        }
        if (item.questionType == 1) {
            item.questionType = '填空题'
        }
        if (item.questionType == 2) {
            item.questionType = '判断题'
        }
        if (item.questionType == 3) {
            item.questionType = '简答题'
        }
        if (item.questionType == 4) {
            item.questionType = '材料题'
        }
    }
}

//添加题目 跳转
const addQUestion = () => {
    router.push({
        path: 'addQuestion',
    })
}

let questionId = ref([]);
//获取题目id
const selectId = (data) => {
    data = JSON.parse(JSON.stringify(data))
    questionId.value = []
    for (let item of data) {
        questionId.value.push({
            ids: item.questionId
        })
    }
}
//批量删除题目
const deleteQuestions = async (questionId) => {
    const id = ref([])
    for (let index = 0; index < questionId.length; index++) {
        const element = questionId[index].ids;
        id.value.push(element)
    }
    const ids = ref({ ids: id })
    await deleteBatchBankAPI(ids.value).then(res => {
        if (res.data.code == 200) {
            ElMessage.success('删除成功')
            getQueryBankListCourse(sessionStorage.getItem('courseId'))
        }

    })
}
//单独删除题目
const deleteQuestion = (row) => {
    const questionId = ref([])
    questionId.value.push({
        ids: row.questionId
    })
    deleteQuestions(questionId.value)
}
//查看题目
const checkQuestion = async (row) => {
    router.push({
        path: 'checkQuestion',
        query: { id: row.questionId },
    })
}
//更新题目
const updateQuestion = async (row) => {
    router.push({
        path: 'updateQuestion',
        query: { id: row.questionId },
    })
}


</script>

<style lang="less" scoped>
.question-box {
    position: relative;
    padding: 0;
    margin: 15px 0px 0 0;
    background-color: #fff;
    border-radius: 15px;

    .question-head {
        padding-bottom: 5px;

        .head-title {
            font-size: 18px;
            font-weight: 550;
            color: grey;
            padding: 15px 10px;
        }

        .head-content {
            display: flex;
            justify-content: space-between;
            padding: 10px 25px 0 25px;

            .head-content-left {
                display: flex;

                .word {
                    padding: 0 5px;
                    font-size: 15px;
                }

                el-form-item {
                    padding: 0;
                    margin: 0;
                }

                .select {
                    width: 150px;
                    margin-right: 15px;
                }

                .btn {
                    border-radius: 23px;
                }
            }

            .head-content-right {
                display: flex;
                height: 34px;

                .icon-sousuo3:hover {
                    cursor: pointer;
                }

                // ::v-deep .el-input__wrapper {
                //     border-radius: 23px;
                // }
            }
        }
    }

    .table {
        max-height: 65vh;
        min-height: 65vh;
        margin: auto;
        width: 1250px;
    }

    .foot {
        overflow: hidden;
        display: flex;
        justify-content: center;

        .question-foot {
            display: flex;
            justify-content: center;
            // position: fixed;

            .pagination {
                margin-bottom: 10px;
                // position: absolute;

            }

        }
    }


}
</style>